<template>
    <input
        :type="state.footerBar.toggleBoxes.type"
        :id="'navi-' + 1"
        :class="state.footerBar.toggleBoxes.style"
    />
    <input
        :type="state.footerBar.toggleBoxes.type"
        :id="'navi-' + 2"
        :class="state.footerBar.toggleBoxes.style"
    />
    <div :class="state.footerBar.footerBarContainerStyle">
        <div :class="state.footerBar.footerBarStyle">
            <div
                :class="state.footerBar.complex.block1.style"
            >{{ state.footerBar.complex.block1.text }}</div>
            <div>
                <img
                    :src="state.footerBar.complex.block1.icon"
                    :class="state.footerBar.complex.block1.imgStyle"
                />
            </div>

            <Hr />
            <div class="flex items-center" :class="state.footerBar.complex.block2.style">
                <img
                    :src="state.footerBar.complex.block2.icon"
                    :class="state.footerBar.complex.block2.iconStyle"
                />

                <div class="text-xs text-gray-500">{{ proms.breadCurb }}</div>
            </div>
            <div :class="state.footerBar.complex.block2.navsStyle_Desktop">
                <ul
                    :class="state.footerBar.complex.block2.navItemUlStyle_Desktop"
                    v-for="(item1, index1) in state.footerBar.complex.block2.navs"
                    :key="index1"
                >
                    <li
                        :class="state.footerBar.complex.block2.navItemTitleStyle_Desktop"
                    >{{ item1.title }}</li>
                    <li
                        :class="state.footerBar.complex.block2.naviItemListStyle_Desktop"
                        v-for="(item2, index2) in item1.contents"
                        :key="index2"
                    >{{ item2.title }}</li>
                </ul>
            </div>
            <div :class="state.footerBar.complex.block2.navsStyle_Phone">
                <ul
                    :class="state.footerBar.complex.block2.navItemUlStyle_Phone"
                    v-for="(item1, index1) in state.footerBar.complex.block2.navs"
                    :key="index1"
                >
                    <li :class="state.footerBar.complex.block2.navItemTitleStyle_Phone">
                        <label
                            :for="'navi-' + (index1 + 1)"
                            :class="state.footerBar.complex.block2.naviItemLableStyle"
                        >{{ item1.title }}</label>
                    </li>
                    <div
                        :class="state.footerBar.complex.block2.NavItemToggleMenuStyle"
                        :id="'toggleMenu-' + (index1 + 1)"
                    >
                        <ul v-for="item2 in item1.contents">
                            <li :class="state.footerBar.complex.block2.naviItemListStyle_Phone">
                                <div>{{ item2.title }}</div>
                                <div>+</div>
                            </li>
                        </ul>
                    </div>
                </ul>
            </div>

            <Hr />
            <div :class="state.footerBar.copyright.copyrightContainerStyle">
                <div
                    :class="state.footerBar.copyright.copyrightStyle"
                >{{ state.footerBar.copyright.text }}</div>
                <ul :class="state.footerBar.copyright.linksUlStyle">
                    <li
                        :class="state.footerBar.copyright.linksItemsStyle"
                        v-for="(item3, index3) in state.footerBar.copyright.links"
                        :key="index3"
                    >{{ item3.title }}</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {  defineProps } from "vue"
import { state } from "@utils/store";
import Hr from "./smallComs/hr.vue";

const proms = defineProps({
    breadCurb: {
        type: String
    }
})



</script>

<style lang="scss">
.footerBarNaviItem:hover {
    text-decoration: underline;
}

#navi-1:checked ~ .footerBarContainer #toggleMenu-1 {
    height: 75px;
}
#navi-2:checked ~ .footerBarContainer #toggleMenu-2 {
    height: 125px;
}
#toggleMenu-1,
#toggleMenu-2 {
    overflow: hidden;
    height: 0;
    transition: height 0.5s ease-in-out;
}

.footerBarContainer {
    transition: height 0.5s ease-in-out;
    max-height: 500px;
}

#navi-1:checked + #navi-2:checked ~ .footerBarContainer {
    height: 500px;
}
#navi-1:checked + #navi-2 ~ .footerBarContainer {
    height: 375px;
}
#navi-1 + #navi-2:checked ~ .footerBarContainer {
    height: 425px;
}
</style>